<template>
  <div class="myArticle-box">
    <el-table
      v-if="noResponse"
      v-loading="loading"
      style="width: 100%;height: 580px;margin: 10px auto;z-index: 1">
    </el-table>
    <div>
      <div class="myArticle-title">
        <div class="title">
          {{this.myselfArticle.articleTitle}}
        </div>
        <v-md-editor
          :value="myselfArticle.articleTileDescribe"
          mode="preview"
        ></v-md-editor>
      </div>
      <div class="myArticle-content">
        <v-md-editor
          :value="myselfArticle.articleReply"
          mode="preview"
        ></v-md-editor>
      </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "ArticleDisplayPage",
        data() {
            return {
                loading:true,
                noResponse:true,
                myselfArticle:{
                    articleTitle:'',
                    articleTileDescribe:'',
                    articleReply: '' ,
                },
                baseURL:'http://localhost:8081/myselfArticle/info/'
            };
        },
        mounted() {
            this.axios.post(this.baseURL+this.$route.query.userReplyId).then(res=>{
                this.noResponse = false
                if (res.data == false) {
                    this.$message.error(this.$t('myselfArticle.content.serviceUnusual'))
                } else {
                    this.myselfArticle = res.data
                }
            }).catch(
                exception=>{
                    console.log(exception)
                }
            )
        }
    }
</script>

<style scoped>
  .myArticle-box{
    width: 1100px;
    min-height: 600px;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .myArticle-title{
    width: 1070px;
    min-height: 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 20px 15px;
    padding-bottom: 10px;
    background-color: rgb(240, 240, 240);
  }
  .title{
    font-size: 28px;
    font-weight: bolder;
    color: rgb(0, 4, 48);
    line-height: 28px;
    letter-spacing: 1px;
    font-family: cursive;
    background-color: white;
    padding: 20px 35px;
    padding-bottom: 0px;
  }
  .myArticle-content{
    width: 1070px;
    padding: 20px 15px;
    padding-top: 0;
    letter-spacing: 1px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: rgb(240, 240, 240);
  }
</style>
